<template>
  <div class="p-4 mx-auto max-w-2xl">
    <h2 class="mb-4 text-xl font-bold">趣味心理测试</h2>
    
    <!-- 开始页面 -->
    <div v-if="!started" class="text-center">
      <h3 class="mb-4 text-lg">{{ currentQuiz.title }}</h3>
      <p class="mb-6 text-gray-600">{{ currentQuiz.description }}</p>
      <button 
        @click="startQuiz" 
        class="px-6 py-2 text-white bg-blue-500 rounded transition hover:bg-blue-600">
        开始测试
      </button>
    </div>

    <!-- 问题页面 -->
    <div v-else-if="!finished" class="space-y-6">
      <div class="p-4 rounded-lg">
        <h3 class="mb-4 text-lg font-medium">
          {{ currentQuestion.question }}
        </h3>
        <div class="space-y-3">
          <button
            v-for="(option, index) in currentQuestion.options"
            :key="index"
            @click="selectAnswer(option)"
            class="block p-3 w-full text-left bg-white rounded border transition hover:bg-gray-50"
            :class="{'border-blue-500': selectedAnswer === option}">
            {{ option.text }}
          </button>
        </div>
      </div>

      <div class="flex justify-between items-center">
        <div class="text-sm text-gray-600">
          问题 {{ currentQuestionIndex + 1 }}/{{ currentQuiz.questions.length }}
        </div>
        <button
          @click="nextQuestion"
          :disabled="!selectedAnswer"
          class="px-6 py-2 text-white bg-blue-500 rounded transition disabled:opacity-50 hover:bg-blue-600">
          {{ currentQuestionIndex === currentQuiz.questions.length - 1 ? '查看结果' : '下一题' }}
        </button>
      </div>
    </div>

    <!-- 结果页面 -->
    <div v-else class="space-y-6">
      <div class="p-6 rounded-lg">
        <h3 class="mb-4 text-lg font-bold text-center">测试结果</h3>
        <div class="mb-4 text-center">
          <div class="mb-2 text-xl font-medium text-blue-600">
            {{ quizResult.title }}
          </div>
          <div class="text-gray-600">
            {{ quizResult.description }}
          </div>
        </div>
        <div class="pt-6 mt-6 border-t border-gray-200">
          <div class="text-sm text-gray-500">
            {{ quizResult.advice }}
          </div>
        </div>
      </div>

      <div class="flex gap-4 justify-center">
        <button 
          @click="restartQuiz" 
          class="px-6 py-2 text-white bg-blue-500 rounded transition hover:bg-blue-600">
          重新测试
        </button>
        <button 
          @click="changeQuiz" 
          class="px-6 py-2 text-gray-700 bg-gray-100 rounded transition hover:bg-gray-200">
          换个测试
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

// TypeScript interfaces
interface Score {
  introvert?: number;
  extrovert?: number;
  logical?: number;
  emotional?: number;
  [key: string]: number | undefined;
}

interface Option {
  text: string;
  score: Score;
}

interface Question {
  question: string;
  options: Option[];
}

interface Quiz {
  id: string;
  title: string;
  description: string;
  questions: Question[];
}

// 测试题库
const quizzes: Quiz[] = [
  {
    id: 'personality',
    title: '你是什么性格类型？',
    description: '通过简单的情境选择，了解你的性格特点',
    questions: [
      {
        question: '周末你最喜欢做什么？',
        options: [
          { text: '独自在家看书或追剧', score: { introvert: 2, extrovert: 0 } },
          { text: '约上朋友出去玩', score: { introvert: 0, extrovert: 2 } },
          { text: '参加一些兴趣小组活动', score: { introvert: 1, extrovert: 1 } },
          { text: '在家做做手工或其他创意活动', score: { introvert: 1, extrovert: 0 } }
        ]
      },
      {
        question: '遇到困难时，你通常会？',
        options: [
          { text: '自己思考解决方案', score: { introvert: 2, logical: 1 } },
          { text: '寻求他人建议', score: { extrovert: 2, emotional: 1 } },
          { text: '上网搜索相关经验', score: { logical: 2, introvert: 1 } },
          { text: '相信直觉做决定', score: { emotional: 2, extrovert: 1 } }
        ]
      },
      {
        question: '如何看待新的改变？',
        options: [
          { text: '保持谨慎，仔细评估', score: { logical: 2, introvert: 1 } },
          { text: '欣然接受，迎接挑战', score: { extrovert: 2, emotional: 1 } },
          { text: '视情况而定，灵活应对', score: { logical: 1, emotional: 1 } },
          { text: '跟随内心的感觉', score: { emotional: 2, introvert: 1 } }
        ]
      },
      {
        question: '在团队中，你更倾向于？',
        options: [
          { text: '专注于完成自己的任务', score: { introvert: 2, logical: 1 } },
          { text: '协调团队，促进合作', score: { extrovert: 2, emotional: 1 } },
          { text: '提供创意和建议', score: { logical: 1, extrovert: 1 } },
          { text: '关注团队氛围', score: { emotional: 2, introvert: 1 } }
        ]
      },
      {
        question: '做决定时，你更看重？',
        options: [
          { text: '数据和逻辑分析', score: { logical: 2, introvert: 1 } },
          { text: '他人的意见和建议', score: { emotional: 1, extrovert: 2 } },
          { text: '过往的经验教训', score: { logical: 1, introvert: 1 } },
          { text: '当下的感受', score: { emotional: 2, extrovert: 1 } }
        ]
      }
    ]
  }
]

// 状态管理
const started = ref(false)
const finished = ref(false)
const currentQuizIndex = ref(0)
const currentQuestionIndex = ref(0)
const selectedAnswer = ref<Option | null>(null)
const scores = ref<Score>({
  introvert: 0,
  extrovert: 0,
  logical: 0,
  emotional: 0
})

// 计算属性
const currentQuiz = computed(() => quizzes[currentQuizIndex.value])
const currentQuestion = computed(() => currentQuiz.value.questions[currentQuestionIndex.value])

// 计算测试结果
const quizResult = computed(() => {
  const { introvert, extrovert, logical, emotional } = scores.value
  
  if (introvert > extrovert && logical > emotional) {
    return {
      title: '理性的思考者',
      description: '你是一个喜欢独立思考的人，擅长逻辑分析和解决问题。你更倾向于在安静的环境中工作，享受独处的时光。',
      advice: '建议多参与一些团队活动，培养与他人的互动能力。同时，你的分析能力是很大的优势，可以在决策时帮助他人。'
    }
  } else if (introvert > extrovert && emotional > logical) {
    return {
      title: '敏感的观察者',
      description: '你是一个富有同理心的人，善于体察他人的情绪。你喜欢独处，但也很关心身边的人。',
      advice: '可以尝试将你的观察和感受用创意的方式表达出来，比如写作或艺术创作。你的洞察力是很宝贵的礼物。'
    }
  } else if (extrovert > introvert && logical > emotional) {
    return {
      title: '务实的行动者',
      description: '你是一个积极主动的人，喜欢与人交往，同时也很注重效率和结果。你善于组织和领导。',
      advice: '在追求目标的同时，也要注意照顾他人的感受。你的行动力是很大的优势，可以带动整个团队前进。'
    }
  } else {
    return {
      title: '热情的激励者',
      description: '你是一个充满活力的人，善于与人沟通，富有同理心。你能够感染他人，创造积极的氛围。',
      advice: '在表达热情的同时，也要注意保持适度的理性判断。你的感染力是很大的优势，可以帮助团队建立良好的氛围。'
    }
  }
})

// 方法
function startQuiz() {
  started.value = true
}

function selectAnswer(option: Option) {
  selectedAnswer.value = option
}

function nextQuestion() {
  if (!selectedAnswer.value) return
  
  // 累加分数
  Object.entries(selectedAnswer.value.score).forEach(([key, value]) => {
    if (value !== undefined && scores.value[key] !== undefined) {
      scores.value[key] = (scores.value[key] || 0) + value
    }
  })
  
  // 清空选择
  selectedAnswer.value = null
  
  // 如果还有下一题，继续；否则完成测试
  if (currentQuestionIndex.value < currentQuiz.value.questions.length - 1) {
    currentQuestionIndex.value++
  } else {
    finished.value = true
  }
}

function restartQuiz() {
  // 重置所有状态
  currentQuestionIndex.value = 0
  selectedAnswer.value = null
  scores.value = {
    introvert: 0,
    extrovert: 0,
    logical: 0,
    emotional: 0
  }
  finished.value = false
}

function changeQuiz() {
  // 切换到下一个测试（如果有的话）
  currentQuizIndex.value = (currentQuizIndex.value + 1) % quizzes.length
  restartQuiz()
  started.value = false
}
</script> 